<template>
	<view>
		<z-paging ref="paging" v-model="list" @query="queryList" empty-view-text="暂无消息">
			<template #top>
				<view
					style="z-index:0;position:absolute;left:0;right:0;top:0;height:396px;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);">
				</view>
				<uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="transparent">
					<view class="flex center w-full fs-16"><text class="text-color-regular">消息</text></view>
				</uni-nav-bar>
				<view class="wx-pub flex item-center justify-between" v-if="userStore.isTabWxPubShow">
					<view class="wx-pub-text">关注公众号，接收活动和订单通知</view>
					<view class=" flex item-center">
						<view class="wx-button" @click="openWxPop">关注</view>
						<image src="../../static/svg/icon-close-tip.svg" mode="widthFix" class="icon-clean" @click="closePub"></image>
					</view>
					
				</view>
				<view v-if="list && list.length" class="relative flex justify-end item-center mt-6 mb-10 mr-16 leading-17">
					<view class="inline-flex item-center py-10" @click="toCleanUnread">
						<image class="size-16 mr-4" src="@/static/svg/icon-clean.svg"></image>
						<text class="fs-12 text-color-hint font-normal">清除未读</text>
					</view>
				</view>
			</template>
			<template #empty>
				<view class="flex-col item-center">
					<image style="height:143px;" src="@/static/svg/empty-message.svg"></image>
					<text class="mt-4 fs-12">暂无消息</text>
				</view>
			</template>
			<view>
				<view v-for="(item,i) in list" :key="i" class="radius-8 p-12 bg-white mt-12 mx-16">
					<view class="flex justify-between item-center relative leading-22">
						<text class="fs-16 text-color-regular font-normal">{{item.msgTitle}}</text>
						<text class="fs-12 text-color-disabled font-normal">{{formatBeginTime(item.notifyTime)}}</text>
						<view v-if="item.msgState===1" class="absolute size-10 bg-primary radius-12 overflow-hidden"
							style="top:-14px;right:-14px;"></view>
					</view>
					<view class="mt-4 fs-12 font-normal" style="color:rgba(0, 0, 0, 0.60);">
						{{item.content}}
					</view>
				</view>
			</view>
			<template #loadingMoreNoMore>
				<view class="mt-12" :style="`height:calc(120px + ${safeAreaBottom}px);`">
					<view class="text-center text-color-hint fs-14">到底了～</view>
				</view>
			</template>
			<template #bottom>
				<!-- <view :style="`height:calc(60px + ${safeAreaBottom}px);`"></view> -->
			</template>
		</z-paging>
		<popWxpub ref="wxPubRef"></popWxpub>
	</view>
</template>

/**
* 策划人、经纪人消息页
*/
<script setup name="Message">
	import {
		onHide
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		unref,
		onBeforeUnmount,
		onMounted
	} from 'vue'
	import {
		formatBeginTime
	} from '@/utils/index.js'
	import {
		useMessageStore
	} from '@/stores/modules/message.js'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import popWxpub from '@/pagesE/components/popup-wxPub/popup-wxPub.vue'
	const userStore = useUserStore()
	const messageStore = useMessageStore()
	const closePub = () => {
		userStore.setPubShowState({key:'tabMessageShow',value:false})
	}
	const wxPubRef = ref()
	const openWxPop = () => {
		wxPubRef.value.showPop(true)
	}
	const navBar = ref(null)
	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets.bottom
	})

	const paging = ref(null)
	const list = ref([])

	const queryParams = ref({
		pageNum: 1,
		pageSize: 10
	})

	const queryList = (pageNo, pageSize) => {
		queryParams.value.pageNum = pageNo
		messageStore.getList(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		})
	}

	const toCleanUnread = (refresh = true) => {
		messageStore.cleanAllUnread().then(res => {
			refresh && paging.value.reload()
		})
	}
	onMounted(() => {
		const token = uni.getStorageSync('token')
		if (token) {
			userStore.getWxRead()
		}
	})
	onBeforeUnmount(() => {
		// 退出页面更新为已读状态
		toCleanUnread(false)
	})
</script>
<style scoped lang="scss">
	.wx-pub{
		position: relative;
		z-index: 1;
		margin: 20rpx 32rpx;
		border-radius: 16rpx;
		background-color: rgba(255, 240, 234, 1);
		height: 72rpx;
		padding: 0 20rpx 0 28rpx;
		.wx-pub-text{
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: rgba(250, 69, 67, 1);
		}
		.wx-button{
			background-color: rgba(250, 69, 67, 1);
			border-radius: 32rpx;
			padding: 4rpx 24rpx;
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 40rpx;
			text-align: center;
			color: #ffffff;
			margin-right: 12rpx;
		}
		.icon-clean{
			width: 40rpx;
		}
	}
</style>